<template>
	<view class="body">
		<view class="image-container">
			<!-- 背景图片 -->
			<!-- <image class="background-image" src="/static/user/tap.png" mode="aspectFill"></image> -->

			<!-- 四个透明按钮区域 -->
			<!-- 	<view class="btn-area top" @click="handleClick('top')"></view>
			<view class="btn-area top-center" @click="handleClick('top-center')"></view>
			<view class="btn-area bottom-center" @click="handleClick('bottom-center')"></view>
			<view class="btn-area bottom" @click="handleClick('bottom')"></view> -->

			<view @click="handleClick('top')">
				<image src="/static/user/tap1.png" style="width: 100%; height: 126rpx"></image>
			</view>
			<view @click="handleClick('top-center')">
				<image src="/static/user/tap2.png" style="width: 100%; height: 126rpx"></image>
			</view>
			<view @click="handleClick('bottom-center')">
				<image src="/static/user/tap3.png" style="width: 100%; height: 126rpx"></image>
			</view>
			<view @click="handleClick('bottom')">
				<image src="/static/user/tap4.png" style="width: 100%; height: 126rpx"></image>
			</view>
		</view>

		<image v-if="isModal" src="/static/user/dlModal.png" class="image-modal" @click="isModal = false"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isModal: false,
			isWeixinBrowser: null
		};
	},
	onShow() {
		this.isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent);
		if (this.isWeixinBrowser) {
			this.isModal = true;
		}
	},
	methods: {
		handleClick(area) {
			// 根据区域执行不同逻辑
			switch (area) {
				case 'top':
					if (!this.isWeixinBrowser) {
						//a平台下载
						window.location.href = 'https://pcmag.dpdzsw.com/prod-api/profile/app/platform-a.apk';
					} else {
						this.isModal = true;
					}
					break;
				case 'top-center':
					if (!this.isWeixinBrowser) {
						//b平台下载
						window.location.href = 'https://pcmag.dpdzsw.com/prod-api/profile/app/platform-b.apk';
					} else {
						this.isModal = true;
					}
					break;
				case 'bottom-center':
					if (!this.isWeixinBrowser) {
						//b平台链接
						window.location.href = 'http://axyxh5b.dpdzsw.com/';
					} else {
						this.isModal = true;
					}
					break;
				case 'bottom':
					if (!this.isWeixinBrowser) {
						//a平台链接
						window.location.href = 'https://axyx.dpdzsw.com/';
						this.isModal = true;
					}
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.body {
	width: 100vw;
	height: 100vh;
	background-image: url('@/static/user/dl.png');
	background-size: 100% 100%;
}
.image-container {
	position: relative;
	left: 50%;
	transform: translate(-50%);
	bottom: -60%;
	width: 538rpx;
	height: 534rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.background-image {
	width: 100%;
	height: 100%;
}

/* 按钮区域样式 */
.btn-area {
	position: absolute;
	width: 100%;
	height: calc(534rpx / 4);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.top {
	top: 0;
	left: 0;
}
.top-center {
	top: calc(534rpx / 4 * 1);
	left: 0;
}
.bottom-center {
	top: calc(534rpx / 4 * 2);
	left: 0;
}
.bottom {
	top: calc(534rpx / 4 * 3);
	left: 0;
}
.btn-area:active {
	background-color: rgba(255, 255, 255, 0.2);
}
.btn-area:hover .btn-text,
.btn-area:active .btn-text {
	opacity: 1;
}
</style>
